{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "0",
   "metadata": {},
   "source": [
    "<a href=\"https://githubtocolab.com/gee-community/geemap/blob/master/docs/notebooks/40_ipywidgets.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open in Colab\"/></a>\n",
    "\n",
    "Uncomment the following line to install [geemap](https://geemap.org) if needed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1",
   "metadata": {},
   "outputs": [],
   "source": [
    "# !pip install geemap"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2",
   "metadata": {},
   "source": [
    "# How to add interactive widgets to the map"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3",
   "metadata": {},
   "source": [
    "## Import libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4",
   "metadata": {},
   "outputs": [],
   "source": [
    "import ee\n",
    "import geemap\n",
    "import ipyleaflet\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5",
   "metadata": {},
   "source": [
    "## Create an interactive map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6",
   "metadata": {},
   "outputs": [],
   "source": [
    "Map = geemap.Map(center=[40, -100], zoom=4)\n",
    "Map"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7",
   "metadata": {},
   "source": [
    "## Add Earth Engine data\n",
    "\n",
    "### Add raster data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8",
   "metadata": {},
   "outputs": [],
   "source": [
    "dem = ee.Image(\"USGS/SRTMGL1_003\")\n",
    "\n",
    "vis_params = {\n",
    "    \"min\": 0,\n",
    "    \"max\": 4000,\n",
    "    \"palette\": [\"006633\", \"E5FFCC\", \"662A00\", \"D8D8D8\", \"F5F5F5\"],\n",
    "}\n",
    "\n",
    "Map.addLayer(dem, vis_params, \"DEM\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9",
   "metadata": {},
   "source": [
    "### Add vector data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "10",
   "metadata": {},
   "outputs": [],
   "source": [
    "fc = ee.FeatureCollection(\"TIGER/2018/States\")\n",
    "Map.addLayer(fc, {}, \"US States\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "11",
   "metadata": {},
   "source": [
    "## Change layer opacity"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "12",
   "metadata": {},
   "outputs": [],
   "source": [
    "Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "13",
   "metadata": {},
   "outputs": [],
   "source": [
    "dem_layer = Map.find_layer(\"DEM\")\n",
    "dem_layer.interact(opacity=(0, 1, 0.1))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "14",
   "metadata": {},
   "outputs": [],
   "source": [
    "vector_layer = Map.find_layer(\"US States\")\n",
    "vector_layer.interact(opacity=(0, 1, 0.1))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "15",
   "metadata": {},
   "source": [
    "## Widget list\n",
    "\n",
    "https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html\n",
    "\n",
    "### Numeric widgets\n",
    "\n",
    "#### IntSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16",
   "metadata": {},
   "outputs": [],
   "source": [
    "int_slider = widgets.IntSlider(\n",
    "    value=2000, min=1984, max=2020, step=1, description=\"Year:\"\n",
    ")\n",
    "int_slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "17",
   "metadata": {},
   "outputs": [],
   "source": [
    "int_slider.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "18",
   "metadata": {},
   "source": [
    "#### FloatSlider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "19",
   "metadata": {},
   "outputs": [],
   "source": [
    "float_slider = widgets.FloatSlider(\n",
    "    value=0, min=-1, max=1, step=0.05, description=\"Threshold:\"\n",
    ")\n",
    "float_slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "20",
   "metadata": {},
   "outputs": [],
   "source": [
    "float_slider.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "21",
   "metadata": {},
   "source": [
    "#### IntProgress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "22",
   "metadata": {},
   "outputs": [],
   "source": [
    "int_progress = widgets.IntProgress(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description=\"Loading:\",\n",
    "    bar_style=\"\",  # 'success', 'info', 'warning', 'danger' or ''\n",
    "    orientation=\"horizontal\",\n",
    ")\n",
    "int_progress"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "23",
   "metadata": {},
   "outputs": [],
   "source": [
    "int_text = widgets.IntText(\n",
    "    value=7,\n",
    "    description=\"Any:\",\n",
    ")\n",
    "int_text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "24",
   "metadata": {},
   "outputs": [],
   "source": [
    "float_text = widgets.FloatText(\n",
    "    value=7.5,\n",
    "    description=\"Any:\",\n",
    ")\n",
    "float_text"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "25",
   "metadata": {},
   "source": [
    "### Boolean widgets\n",
    "\n",
    "#### ToggleButton"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "26",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle_button = widgets.ToggleButton(\n",
    "    value=False,\n",
    "    description=\"Click me\",\n",
    "    disabled=False,\n",
    "    button_style=\"success\",  # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip=\"Description\",\n",
    "    icon=\"check\",  # (FontAwesome names without the `fa-` prefix)\n",
    ")\n",
    "toggle_button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "27",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle_button.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "28",
   "metadata": {},
   "source": [
    "#### Checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "29",
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox = widgets.Checkbox(\n",
    "    value=False, description=\"Check me\", disabled=False, indent=False\n",
    ")\n",
    "checkbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "30",
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "31",
   "metadata": {},
   "source": [
    "### Selection widgets\n",
    "\n",
    "#### Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "32",
   "metadata": {},
   "outputs": [],
   "source": [
    "dropdown = widgets.Dropdown(\n",
    "    options=[\"USA\", \"Canada\", \"Mexico\"], value=\"Canada\", description=\"Country:\"\n",
    ")\n",
    "dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "33",
   "metadata": {},
   "outputs": [],
   "source": [
    "dropdown.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "34",
   "metadata": {},
   "source": [
    "#### RadioButtons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "35",
   "metadata": {},
   "outputs": [],
   "source": [
    "radio_buttons = widgets.RadioButtons(\n",
    "    options=[\"USA\", \"Canada\", \"Mexico\"], value=\"Canada\", description=\"Country:\"\n",
    ")\n",
    "radio_buttons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "36",
   "metadata": {},
   "outputs": [],
   "source": [
    "radio_buttons.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "37",
   "metadata": {},
   "source": [
    "### String widgets\n",
    "\n",
    "#### Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "38",
   "metadata": {},
   "outputs": [],
   "source": [
    "text = widgets.Text(\n",
    "    value=\"USA\",\n",
    "    placeholder=\"Enter a country name\",\n",
    "    description=\"Country:\",\n",
    "    disabled=False,\n",
    ")\n",
    "text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "39",
   "metadata": {},
   "outputs": [],
   "source": [
    "text.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "40",
   "metadata": {},
   "source": [
    "#### Textarea"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "41",
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Textarea(\n",
    "    value=\"Hello World\",\n",
    "    placeholder=\"Type something\",\n",
    "    description=\"String:\",\n",
    "    disabled=False,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "42",
   "metadata": {},
   "source": [
    "#### HTML"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "43",
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.HTML(\n",
    "    value=\"Hello <b>World</b>\",\n",
    "    placeholder=\"Some HTML\",\n",
    "    description=\"Some HTML\",\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "44",
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.HTML(\n",
    "    value='<img src=\"https://earthengine.google.com/static/images/earth-engine-logo.png\" width=\"100\" height=\"100\">'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45",
   "metadata": {},
   "source": [
    "### Button"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46",
   "metadata": {},
   "outputs": [],
   "source": [
    "button = widgets.Button(\n",
    "    description=\"Click me\",\n",
    "    button_style=\"info\",  # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip=\"Click me\",\n",
    "    icon=\"check\",  # (FontAwesome names without the `fa-` prefix)\n",
    ")\n",
    "button"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "47",
   "metadata": {},
   "source": [
    "### Date picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "48",
   "metadata": {},
   "outputs": [],
   "source": [
    "date_picker = widgets.DatePicker(description=\"Pick a Date\", disabled=False)\n",
    "date_picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "49",
   "metadata": {},
   "outputs": [],
   "source": [
    "date_picker.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "50",
   "metadata": {},
   "source": [
    "### Color picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "51",
   "metadata": {},
   "outputs": [],
   "source": [
    "color_picker = widgets.ColorPicker(\n",
    "    concise=False, description=\"Pick a color\", value=\"blue\", disabled=False\n",
    ")\n",
    "color_picker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "52",
   "metadata": {},
   "outputs": [],
   "source": [
    "color_picker.value"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53",
   "metadata": {},
   "source": [
    "### Output widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "54",
   "metadata": {},
   "outputs": [],
   "source": [
    "out = widgets.Output(layout={\"border\": \"1px solid black\"})\n",
    "out"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55",
   "metadata": {},
   "outputs": [],
   "source": [
    "with out:\n",
    "    for i in range(10):\n",
    "        print(i, \"Hello world!\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "56",
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import YouTubeVideo\n",
    "\n",
    "out.clear_output()\n",
    "with out:\n",
    "    display(YouTubeVideo(\"7qRtsTCnnSM\"))\n",
    "out"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "57",
   "metadata": {},
   "outputs": [],
   "source": [
    "out.clear_output()\n",
    "with out:\n",
    "    display(widgets.IntSlider())\n",
    "out"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "58",
   "metadata": {},
   "source": [
    "## Add a widget to the map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "59",
   "metadata": {},
   "outputs": [],
   "source": [
    "Map = geemap.Map()\n",
    "\n",
    "dem = ee.Image(\"USGS/SRTMGL1_003\")\n",
    "fc = ee.FeatureCollection(\"TIGER/2018/States\")\n",
    "vis_params = {\n",
    "    \"min\": 0,\n",
    "    \"max\": 4000,\n",
    "    \"palette\": [\"006633\", \"E5FFCC\", \"662A00\", \"D8D8D8\", \"F5F5F5\"],\n",
    "}\n",
    "\n",
    "Map.addLayer(dem, vis_params, \"DEM\")\n",
    "Map.addLayer(fc, {}, \"US States\")\n",
    "\n",
    "Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "60",
   "metadata": {},
   "outputs": [],
   "source": [
    "output_widget = widgets.Output(layout={\"border\": \"1px solid black\"})\n",
    "output_control = ipyleaflet.WidgetControl(widget=output_widget, position=\"bottomright\")\n",
    "Map.add_control(output_control)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "61",
   "metadata": {},
   "outputs": [],
   "source": [
    "with output_widget:\n",
    "    print(\"Nice map!\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "62",
   "metadata": {},
   "outputs": [],
   "source": [
    "output_widget.clear_output()\n",
    "logo = widgets.HTML(\n",
    "    value='<img src=\"https://earthengine.google.com/static/images/earth-engine-logo.png\" width=\"100\" height=\"100\">'\n",
    ")\n",
    "with output_widget:\n",
    "    display(logo)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "63",
   "metadata": {},
   "outputs": [],
   "source": [
    "def handle_interaction(**kwargs):\n",
    "    latlon = kwargs.get(\"coordinates\")\n",
    "    if kwargs.get(\"type\") == \"click\":\n",
    "        Map.default_style = {\"cursor\": \"wait\"}\n",
    "        xy = ee.Geometry.Point(latlon[::-1])\n",
    "        selected_fc = fc.filterBounds(xy)\n",
    "\n",
    "        with output_widget:\n",
    "            output_widget.clear_output()\n",
    "\n",
    "            try:\n",
    "                name = selected_fc.first().get(\"NAME\").getInfo()\n",
    "                usps = selected_fc.first().get(\"STUSPS\").getInfo()\n",
    "                Map.layers = Map.layers[:4]\n",
    "                geom = selected_fc.geometry()\n",
    "                layer_name = name + \"-\" + usps\n",
    "                Map.addLayer(\n",
    "                    ee.Image().paint(geom, 0, 2), {\"palette\": \"red\"}, layer_name\n",
    "                )\n",
    "                print(layer_name)\n",
    "            except Exception as e:\n",
    "                print(\"No feature could be found\")\n",
    "                Map.layers = Map.layers[:4]\n",
    "\n",
    "        Map.default_style = {\"cursor\": \"pointer\"}\n",
    "\n",
    "\n",
    "Map.on_interaction(handle_interaction)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
